.contenitore-pulsanti-flex {
  display: flex; /* Attiva il layout flessibile */
  justify-content: center; /* Centra orizzontalmente i pulsanti all'interno del contenitore */
  gap: 20px; /* Aggiunge uno spazio di 20px tra i pulsanti */
  margin: 30px 0; /* Aggiunge un po' di margine sopra e sotto il blocco di pulsanti */
}

.pulsante-bello {
  /* Aspetto Generale */
  background-color: #007bff; /* Colore di sfondo primario (Blu) */
  color: white; /* Colore del testo */
  padding: 12px 24px; /* Spaziatura interna (rende il pulsante grande) */
  border: none; /* Rimuove il bordo predefinito */
  border-radius: 8px; /* Angoli leggermente arrotondati */
  cursor: pointer; /* Cambia il cursore in una mano per indicare che è cliccabile */
  
  /* Tipografia */
  font-size: 16px; 
  font-weight: bold; 
  text-transform: uppercase; /* Testo in maiuscolo */
  letter-spacing: 0.5px;

  /* Aggiungi queste due righe per l'uso con l'elemento <a> */
  text-decoration: none; /* Rimuove la sottolineatura tipica dei link */
  display: inline-block; /* Permette al padding di funzionare correttamente */

  /* Transizione per l'effetto hover */
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}

/* Effetto al passaggio del mouse (Hover) */
.pulsante-bello:hover {
  background-color: #0056b3; /* Scurisce lo sfondo al passaggio del mouse */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Rende l'ombra più pronunciata */
}

/* Effetto al click (Active) - facoltativo, ma piacevole */
.pulsante-bello:active {
  background-color: #004085; /* Scurisce ancora di più */
  transform: translateY(1px); /* Sposta leggermente il pulsante per un effetto di "pressione" */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- STILE BLU (il tuo originale) --- */
.pulsante-blu {
  background-color: #007bff;
  color: white;
}
.pulsante-blu:hover {
  background-color: #0056b3;
}
.pulsante-blu:active {
  background-color: #004085;
}
/* --- STILE VERDE --- */
.pulsante-verde {
  background-color: #28a745; /* Verde Brillante */
  color: white; 
}

.pulsante-verde:hover {
  background-color: #1e7e34; /* Verde scuro all'hover */
}

.pulsante-verde:active {
  background-color: #155724; 
  transform: translateY(1px);
}
.pulsante-giallo {
  /* Giallo Brillante per Sfondo */
  background-color: #ffc107; 
  color: #212529; /* Testo Nero/Grigio Scuro per leggibilità */
  
  /* Mantieni le altre proprietà del .pulsante-bello (padding, border-radius, etc.) */
}

/* Effetto Hover specifico per il giallo */
.pulsante-giallo:hover {
  background-color: #ffcd39; /* Un giallo leggermente più chiaro al mouse-over */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); 
}

/* Effetto Active specifico per il giallo */
.pulsante-giallo:active {
  background-color: #e0a800; /* Un giallo più scuro al click */
}




/* ... [CSS Precedente] ... */

/* Stile per il logo della scuola */
.school-logo {
    max-width: 100px; /* Larghezza massima del logo */
    height: auto;      /* Mantiene le proporzioni */
    margin-bottom: 20px; /* Spazio sotto il logo e sopra il titolo H1 */
}

/* Stile per la foto dell'istituto */
.school-photo {
    width: 100%; /* L'immagine occuperà tutta la larghezza del contenitore */
    max-width: 700px; /* Ma non sarà più larga di questo */
    height: auto;    /* Mantiene le proporzioni */
    border-radius: 8px; /* Angoli arrotondati */
    margin-bottom: 30px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Leggera ombra */
}

/* Media Queries: Adattamento per schermi piccoli (es. smartphone) */
@media (max-width: 600px) {
    .school-logo {
        max-width: 150px; 
    }
    /* Riduci il padding su schermi piccoli */
    .container {
        padding: 20px;
}
-------------- pagina indirizzi
    }/* Container per le due colonne */
.container-due-colonne {
    display: flex; /* Attiva il layout flexbox */
    width: 100%;
    max-width: 1000px; /* Larghezza massima del sito */
    margin: 0 auto; /* Centra il container */
}

/* Colonna di navigazione (sinistra) */
.colonna-sinistra {
    width: 30%; /* Ad esempio, il 30% della larghezza */
    padding: 20px;
    background-color: #f4f4f4;
}

/* Colonna dei contenuti/descrizioni (destra) */
.colonna-destra {
    width: 70%; /* Il resto della larghezza */
    padding: 20px;
    border-left: 1px solid #ccc; /* Linea di separazione verticale */
    min-height: 500px; /* Assicura un'altezza minima */
}
/* Nascondi TUTTE le descrizioni inizialmente */
.descrizione-hover-content {
    display: none;
}

/* Quando si passa il mouse sull'elemento 'li' */
/* .colonna-sinistra li:hover .descrizione-hover-content {
    display: block; /* Rendi visibile il contenuto al passaggio del mouse */
}*/
------------------------ pagine orari
<style>
/* Stile base del contenitore */
.table-container {
    font-family: Arial, sans-serif;
    margin: 20px;
}

/* Stile della tabella: Usa l'ID generico #orari */
#orari {
    width: 100%;
    border-collapse: collapse; /* Essenziale per evitare doppi bordi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Stile per tutte le celle (TH e TD) per creare la griglia */
#orari th, 
#orari td {
    border: 1px solid #ccc; /* Colore e spessore della griglia */
    padding: 10px 15px;
    text-align: center;
}

/* Colore e stile per l'intestazione */
#orari thead th {
    background-color: #007bff; /* Blu scuola */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

/* Allineamento a sinistra per i nomi delle materie */
#orari td.materia {
    text-align: left;
    font-weight: 500;
    background-color: #f8f9fa; /* Sfondo leggero per evidenziare */
}

/* Stile per l'interazione (i numeri delle ore) */
#orari td a {
    color: #007bff; /* Colore link */
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    display: block; /* Rende l'intera cella cliccabile, o quasi */
}

#orari td a:hover {
    color: #0056b3; /* Colore al passaggio del mouse */
    text-decoration: underline;
}

/* Stile per la riga totale */
#orari tfoot tr.totale {
    background-color: #e9ecef;
    font-weight: bold;
}

/* Stile per le note */
.note {
    margin-top: 10px;
    font-size: 0.9em;
    color: #6c757d;
}

/* Stile per le celle vuote (opzionale) */
#orari td:empty {
    background-color: #f0f0f0;
}
</style>